<template>
    <div class="card__warp">
        <div class="card__container" @click="cardClickHandler(item.id)">
            <div class="card-img">
                <img :src="item.cover" alt="">
            </div>
            <div class="card-content">
                <p class="content-text">{{item.title}}</p>
                <p style="display: flex; justify-content: space-between">
                    <span>{{fmtDate(item.publishTime)}}</span>
                    <span>
            <i class="el-icon-star-off"></i>
            {{item.start}}
          </span>
                </p>
                <p></p>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from "moment";

    export default {
        props: {
            item: Object
        },
        data() {
            return {}
        },
        methods: {
            fmtDate(date) {
                return moment(date).format('YYYY-MM-DD HH:mm:ss')
            },
            // 卡片点击处理函数
            cardClickHandler(id) {
                // 点击当前项目卡片实现路由跳转，跳转至项目的详情页
                // 路由跳转同时传递参数
                this.$router.push({
                    path:"/Article",
                    query:{article:id}
                })
            },
        }
    }
</script>

<style lang="css" scoped>
    .card__warp {
        display: inline-block;
        width: 300px;
        padding: 0 10px 0 10px;
        margin-bottom: 20px;
    }

    .card__container {
        transition: 0.5s;
    }

    .card__container:hover {
        background-color: #fff;
    }

    .card-img img {
        width: 300px;
        height: 160px;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }

    .card-content {
        cursor: pointer;
        padding: 1em;
        line-height: 2em;
    }

    .content-text {
        max-height: 56px;
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>